<script setup lang="ts">
import { ref, reactive } from 'vue';
import { loginHandler } from '../../utils/api'
import { useUserStore } from '../stores/user'
import { useRouter } from 'vue-router'
import { showNotify } from 'vant';
const router = useRouter()
const store = useUserStore()

const from = reactive({
    mobile: '13230000059',
    password: 'abc12345'
})
const data = reactive({
    flag: false
})
const onSubmit = (values: object) => {
    console.log('submit', values);
};

// 选择协议
const editFlag = () => {
    data.flag = !data.flag
}

// 登录
const gohome = () => {
    if (data.flag == false) {
        showNotify({ type: 'warning', message: '请先勾选用户协议' });
        return
    } else {
        loginHandler(from).then((res) => {
            console.log(18, res);
            store.state.token = localStorage.setItem('token', res.data.token)
            store.state.account = localStorage.setItem('account', res.data.account)
            store.state.avatar = localStorage.setItem('avatar', res.data.avatar)
            store.state.id = localStorage.setItem('id', res.data.id)
            router.push('/')
        })
    }
}

</script>

<template>
    <div class="box">
        <div class="top">
            <span><van-icon name="arrow-left" /></span>
            <span style="color: #16c2a3;">注册</span>
        </div>
        <div class="con">
            <h2>密码登录</h2>
            <span style="font-size: 14px;">短信验证码登录<van-icon name="arrow" /></span>
        </div>
        <div class="from">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="from.mobile" name="手机号" placeholder="手机号"
                        :rules="[{ required: true, message: '请填写手机号' }]" />
                    <van-field style="margin-top: 10px;" v-model="from.password" type="password" name="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                </van-cell-group>
            </van-form>
            <p class="p" @change="editFlag"><van-checkbox style="margin-right: 10px;"
                    v-model="data.flag"></van-checkbox>我已同意
                &ensp;<span style="color: #16c2a3;">用户协议</span>&ensp;及&ensp;<span style="color: #16c2a3;">隐私条款</span></p>
            <van-button round type="success" class="btn" @click="gohome">登录</van-button>
            <p class="pwd">忘记密码？</p>
            <div class="foot">
                <p class="log">第三方登录</p>
                <van-image round width="48px" height="44px" src="../../public/企鹅.png" />
            </div>
        </div>
    </div>
</template>
<style scoped>
.box {
    width: 100%;
}

.top {
    width: 100%;
    display: flex;
    height: 45px;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
}

.con {
    width: 100%;
    display: flex;
    height: 45px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 20px 0;
}

.from {
    width: 100%;
    margin: 40px 0;
}

.p {
    width: 100%;
    display: flex;
    margin-left: 35px;
    margin-top: 20px;
    font-size: 14px;
    align-items: center;
}

.btn {
    width: 90%;
    margin: 10px 20px;
    box-sizing: border-box;
    background: #16c2a3;
}

.pwd {
    margin: 15px 20px;
    font-size: 14px;
    color: #3c3e42;
}

.foot {
    width: 100%;
    text-align: center;
    margin-top: 75px;
}

.log {
    font-size: 14px;
    color: #969799;
    margin-bottom: 20px;
}
</style>
